<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue监测数据改变的原理_数组</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>爱好</h2>
      <ul>
        <li v-for="(v,index) in student.hobbies" :key="index">{{v}}</li>
      </ul>
      <h2>朋友们</h2>
      <ul>
        <li v-for="(f,index) in student.friends" :key="index">
          {{f.name}}-{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    // push、pop、shift、unshift、splice、sort、reverse
    const vm = new Vue({
      el: "#root",
      data: {
        student: {
          name: "jerry",
          age: 34,
          hobbies: ["唱", "跳", "rap", "篮球"],
          friends: [
            { name: "tom", age: 35 },
            { name: "jennie", age: 27 },
          ],
        },
      },
    });

    // delete vm.student.hobbies[0];// ×
    // vm.student.hobbies.slice(0, 1);// ×
    // Vue.delete(vm.student.hobbies, 0);// √
    // Vue.set(vm.student.hobbies, 1, '吃');// √
    // vm.student.hobbies.pop("篮球");
    // vm.student.hobbies.push("睡");
    // vm.student.hobbies.shift("唱");
    // vm.student.hobbies.unshift("爬山");
    /* 注意：虽然这个方法是可以触发响应式更新，
    但是不能用于监听数组索引或长度的变化，需要手动更新视图。（Vue似乎在包裹的过程中做了这个事情） */
    vm.student.hobbies.splice(1, 1, "溜冰");
    console.log(vm.student.hobbies.length);
    // vm.student.hobbies.reverse();
  </script>
</html>
